<template>
	<div class="main0">
		 <scroller :on-infinite="infinite" ref="my_scroller">
		<div class="alert">
			此功能暂未开放...
		</div>
		<div class="weizhi" v-if="weizhi!=1">
			<div class="weizhizhong">
				<div class="cityweizhi">当前定位城市: {{nowCity}}市</div>
				<div style="color: #999;" class="qiehuan">{{nowCityNo}}</div>
				<div class="btn">
					<a href="javascript:void(0);" class="cal">取消</a>
					<a href="javascript:void(0);"  class="btnOk" v-if="nowCityNo=='是否切换'" @click="startBtnOk">确定</a>
				</div>
			</div>
		</div>
		<!--轮播图-->
		<div class="lbt">
			<!--<p>不买贵的，不买便宜的，只买对的高性价比房</p>-->
			<!--<p><img src="static/images/bannerIco.png" alt="" /></p>-->
			<div class="search">
				<select  class="select0">
					<option :data-cityId=item.cityId v-for="item in citys">{{item.cityName}}</option>
				</select>
				<input type="text" placeholder="输入楼盘/小区的名称"/>
			</div>
			<div class="swiper-container" style="height: 100%;">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="static/images/banner.png"/>
					</div>
					<div class="swiper-slide">
						<img src="static/images/banner1.png"/>
					</div>
					<div class="swiper-slide">
						<img src="static/images/banner2.png"/>
					</div>
				</div>
			</div>
		</div>
		<!--推广-->
		<div class="tuiguang">
			<div class="laba">
				<img src="static/images/fctt.png"/>
			</div>
			<div class="swiper_wrap">
				<ul class="font_inner" style="height: 120px; top: 0px;">
					<li v-for="item in zixunTuijian">
						<a href="javascript:void(0);" :data-id=item.informationId>{{item.title}}</a>
					</li>
				</ul>
			</div>
			<img src="static/images/right-botton-.png" alt="" />
		</div>
		<!--导航条-->
		<div class="daohang">
			<div class="rightPK">
				<img src="static/images/5.png"/>
				<span>
					开始对比
				</span>
			</div>
			<!--<nav>
				<div class="nav">
					<div class="on houseNav" type="new">
						<img src="static/images/1.png"/>
						<span>
							新房排行
						</span>
					</div>
					<div type="xiaoQu" class="houseNav" style="">
						<img src="static/images/2.png"/>
						<span>
							二手排行
						</span>
					</div>
					<div type="all" class="houseNav" style="">
						<img src="static/images/3.png"/>
						<span>
							组合排行
						</span>
					</div>
					<div class="zixun">
						<img src="static/images/6.png"/>
						<span>
							好房头条
						</span>
					</div>
					<div class="map">
						<img src="static/images/map.png"/>
						<span>
							地图找房
						</span>
					</div>
					<div class="zhongxing">
						<img src="static/images/4.png"/>
						<span>
							个人中心
						</span>
					</div>
				</div>
				
			</nav>-->
			<nav>
				<ly-tab
				    v-model="selectedId"
				    :items="items"
				    :options="options">
				</ly-tab>
			</nav>
		</div>
		<router-view></router-view>
		<div class="choose">
			<div v-for="item in selList" v-if="showInput">
				<span class="chooseName" style="width: 30%;">{{item.houseName}}</span>
				<img v-for="item in hasStar(item.score)" :src=item alt="" />
				<span class='score'>{{item.score}}分</span>
				<span style='margin-right:7px;color:#e51c23;' class="price">{{item.price}}</span>
				<i class="mui-icon mui-icon-closeempty"></i>
			</div>
		</div>
		<!--列表展示-->
		<div class="houseRank">
			<ul>
				<li v-for="(item,index) in houseList" :data-id=item.houseId :data-type=item.houseType :data-flag=item.flag>
					<div class="topLi">
						<div class="radio">
							<input type="radio" class="check-box" />
						</div>
						<div class="num" :data-index=(index+1)>
							<img src="static/images/frist.png" alt=""  v-if="index==0 ?true:false"/>
							<img src="static/images/second.png" alt=""  v-if="index==1 ?true:false"/>
							<img src="static/images/three.png" alt=""  v-if="index==2 ?true:false"/>
							<b v-show="index==0 || index==1 || index==2?false:true">No.<span>{{index+1}}</span></b>
						</div>
						<div class="house">
							<h3><b>{{item.houseName}}</b><span>　{{item.houseArea}}</span><i v-if="item.houseType=='new' && item.type=='all'"> - 新房</i><i v-if="item.houseType=='xiaoQu' && item.type=='all'"> - 二手房</i></h3>
							<div class="xing">
								性价比星级:<img v-for="item in hasStar(item.houseCore)" :src="item"/>
							</div>
							<div v-if="item.houseCore!=null && item.housePrice!=0">性价比得分:<span class="score0">{{item.houseCore}}</span>分<span>{{item.housePrice}}元/平</span></div>
							<div v-if="item.houseCore==null || item.housePrice==0">暂无性价比</div>
						</div>
						
						<div class="rightPic">
							<img src="static/images/11@2x.png"/>
						</div>
					</div>
					<div class="bottomLi">
						<div class="bottomLiNum">
							<img src="static/images/ppsl.png" alt="" />
							<span>{{item.fxzb.pingpei}}</span>
							<div>品牌</div>
						</div>
						<div class="bottomLiNum">
							<img src="static/images/ghjg.png" alt="" />
							<span>{{item.fxzb.guihua}}</span>
							<div>规划</div>
						</div>
						<div class="bottomLiNum">
							<img src="static/images/sqpt.png" alt="" />
							<span>{{item.fxzb.shequ}}</span>
							<div>社区</div>
						</div>
						<div class="bottomLiNum">
							<img src="static/images/wyfw.png" alt="" />
							<span>{{item.fxzb.wuye}}</span>
							<div>物业</div>
						</div>
						<div class="bottomLiNum">
							<img src="static/images/ddpt.png" alt="" />
							<span>{{item.fxzb.diduan}}</span>
							<div>地段</div>
						</div>
						<div class="xiangqing">
							详情
						</div>
					</div>
				</li>
				<!--<li class="show" style="margin-bottom: 10px;text-align: center;">
					<img src="static/images/loading.gif" style="height: 70px;"/>
				</li>-->
			</ul>
		</div>
		
		<div class="top0">
			为你筛选{{allListNum}}条信息
		</div>
		</scroller>
		<!--对比-->
		<div class="duibi">
			<div>{{duibi}}</div>			
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import VueScroller from 'vue-scroller'
	import LyTab from 'ly-tab'
	Vue.use(LyTab)		
	Vue.use(VueScroller)
	import Swiper from 'swiper';
	export default {
		data() {
			return {
				houseType:'new',
				citys:[],
				selList:[],
				duibi:'只能选择两项进行PK',
				houseList:[],
				flag:true,
				showInput:false,
				pingpei:0,
				guihua:0,
				shequ:0,
				wuye:0,
				diduan:0,
				allListNum:0,
				noData:'',
				nowCity:'西安',
				nowCityNo:'暂未开通此城市',
				weizhi:1,
				zixunTuijian:[],
				ajaxURL:"http://madmin.hfph.com.cn",
				selectedId: 0,
			    items: [
			        {label: '新房排行',icon:'static/images/1.png',className:'houseNav',type:'new'},
			        {label: '二手排行',icon:'static/images/2.png',className:'houseNav',type:'xiaoQu'},
			        {label: '组合排行',icon:'static/images/3.png',className:'houseNav',type:'all'},
			        {label: '好房头条',icon:'static/images/6.png',className:'zixun'},
			        {label: '地图找房',icon:'static/images/map.png',className:'map'},
			        {label: '个人中心',icon:'static/images/4.png',className:'zhongxing'}
			    ],
			    options: {
			        activeColor: '#0186c2'
			    }
			}
		},
		created(){
			var that=this;
			let allCityLngLat=[
			    {'cityName':'北京','citylnglat':[116.41667,39.91667]},
			    {'cityName':'上海','citylnglat':[121.43333,31.23000]},
			    {'cityName':'杭州','citylnglat':[120.20000,30.26667]},
			    {'cityName':'广州','citylnglat':[113.23333,23.16667]},
			    {'cityName':'深圳','citylnglat':[114.06667,22.61667]},
			    {'cityName':'西安','citylnglat':[108.95000,34.26667]}
			];
//			localStorage.setItem("ajaxURL", "http://47.94.93.148:8086");
//			localStorage.setItem("ajaxURL", "http://192.168.0.162:8080");
//			localStorage.setItem("ajaxURL", "http://192.168.0.172:8080");
			localStorage.setItem("ajaxURL", "http://madmin.hfph.com.cn");
			let ajaxURL=localStorage.getItem("ajaxURL");
			this.houseType = this.$route.query.HouseType;
			
			var cityId = localStorage.getItem('city');
			
			var num111 = localStorage.getItem('num');
			if(num111==undefined){
				that.weizhi=num111;
				localStorage.setItem("type", "new");
				localStorage.setItem('num',1);
				localStorage.setItem('city', 610100);
				let cityName = '西安';
				localStorage.setItem('cityName', cityName);
				
				console.log(cityName)
				for(var i=0;i<allCityLngLat.length;i++){
					if(cityName==allCityLngLat[i].cityName){
						that.nowCityNo='是否切换'
					}
				}
				let shengIdx = returnCitySN.cname.indexOf("省");
				let cityname = returnCitySN.cname.slice(shengIdx + 1, -1);
				
				that.nowCity=cityname;
				that.reload();
			}
			//获取位置
			that.indexAjax();
			//头条资讯
			that.articleAjax(cityId);
			
			setTimeout(function(){
				let cityId=localStorage.getItem("city");
				//初始化条件
				
				that.indexMapInitAjax(cityId,localStorage.getItem('type'))
				//列表初始化
				let data = JSON.parse(localStorage.getItem('data'));
//				console.log(data)
					data.page=1;
				localStorage.setItem('data',JSON.stringify(data));
				that.ajaxU0(1, that.houseType);
			},500)
			
		},
		mounted(){
			var that=this;
			
			$('.duibi').addClass('active').attr("disabled",true);
			let ajaxURL=localStorage.getItem("ajaxURL");
			if(localStorage.getItem('type')=='xiaoQu'){
				this.houseType = 'xiaoQu';
				$('.nav div[type=xiaoQu]').addClass('on').siblings().removeClass('on');
			}else if(localStorage.getItem('type')=='new'){
				this.houseType = 'new';
				$('.nav div[type=new]').addClass('on').siblings().removeClass('on');
			}else{
				this.houseType = 'all';
				$('.nav div[type=all]').addClass('on').siblings().removeClass('on');
			}
			
			new Swiper('.swiper-container', {
				slidesPerView: 1,
			});
			
			$('.cal').click(function(){
				$('.weizhi').hide();
				localStorage.setItem('num',1)
			})
			$('nav').on('click', '.houseNav', function() {
				localStorage.setItem('showInput',true)
				$('.duibi').hide();
				$(this).addClass('on').siblings().removeClass('on');
				that.houseType = $(this).attr('type');

				localStorage.setItem('type',that.houseType)
				localStorage.setItem('selList',JSON.stringify([]));
				that.reload()
				that.houseList = [];
				$('.navTop li:nth-child(1) span').html("区域")
				$('.navTop li:nth-child(2) span').html("价格")
				$('.navTop li:nth-child(3) span').html("户型")
				$('.navTop li:nth-child(4) span').html("更多")
				that.noData = "";
				setTimeout(function(){
					that.ajaxU0(1, that.houseType);
				},300)
			})
			
			$('.nav').on('click', '.HouseNav', function() {
				$('.alert').show().animate({'height':150,'width':150},200)
				setTimeout(function(){
					$('.alert').animate({'height':0,'width':0},200,function(){
						$(this).hide()
					});
					
				},1500)
			})
			
			$(".font_inner li:eq(0)").clone(true).appendTo($(".font_inner"));//克隆第一个放到最后(实现无缝滚动)
			var liHeight = $(".swiper_wrap li").height();//一个li的高度
			//获取li的总高度再减去一个li的高度(再减一个Li是因为克隆了多出了一个Li的高度)
			var totalHeight = ($(".font_inner li").length *  $(".font_inner li").eq(0).height()) -liHeight;
			$(".font_inner").height(totalHeight);//给ul赋值高度
			var index = 0;
			var autoTimer = 0;//全局变量目的实现左右点击同步
			var clickEndFlag = true; //设置每张走完才能再点击
		
			function tab(){
				$(".font_inner").stop().animate({
					top: -index * liHeight
				},400,function(){
					clickEndFlag = true;//图片走完才会true
					if(index == $(".font_inner li").length -1) {
						$(".font_inner").css({top:0});
						index = 0;
					}
				})
			}
		
			function next() {
				index++;
				if(index > $(".font_inner li").length - 1) {//判断index为最后一个Li时index为0
					index = 0;
				}
				tab();
			}
			function prev() {
				index--;
				if(index < 0) {
					index = $(".font_inner li").size() - 2;//因为index的0 == 第一个Li，减二是因为一开始就克隆了一个LI在尾部也就是多出了一个Li，减二也就是_index = Li的长度减二
					$(".font_inner").css("top",- ($(".font_inner li").size() -1) * liHeight);//当_index为-1时执行这条，也就是走到li的最后一个
				}
				tab();
			}
			
			//自动轮播
			autoTimer = setInterval(next,3000);
			$(".font_inner a").hover(function(){
				clearInterval(autoTimer);
			},function() {
				autoTimer = setInterval(next,3000);
			})
			
			$('.font_inner').on('click','a',function(){
				that.$router.push({
		          path: '/dongtaixiangqing',
		          name: 'dongtaixiangqing',
		          query: {
		            id: $(this).attr('data-id')
		          }
		        })
				return false;
			})
			
			
			
			//
			var data =[];
			if(JSON.parse(localStorage.getItem('selList'))!=null){
				data = JSON.parse(localStorage.getItem('selList'));
			}
			 that.selList =data;
			$('.houseRank').on('click','.check-box',function(){
				console.log($(this).prop('checked'))
				if($(this).prop('checked')){
					console.log(data)
					for(var i=0;i<data.length;i++){
						if($(this).parents('li').attr('data-id')==data[i].houseId){
							data.splice(i,1)
						}
					}
					$(this).prop("checked",false);
				}else{
					var data0 = {
						houseId:$(this).parents('li').attr('data-id'),
						houseName:$(this).parents('li').find('.house b').html(),
						price:$(this).parents('li').find('.price').html(),
						type:$(this).parents('li').attr('data-type'),
						score:$(this).parents('li').find('.score0').html()
					}
					
					data.push(data0)
					
					var hash = {}; 
					data = data.reduce(function(item, next) { 
						hash[next.houseId] ? '' : hash[next.houseId] = true && item.push(next); 
						return item 
					}, [])	
					$(this).prop("checked",true);
				}
				
				that.selList= data;
				localStorage.setItem('selList', JSON.stringify(data));
			})
			$('.houseRank').on('click','li',function(){
				var flag = $(this).attr('data-flag');
				if($('.radio').css('display')=='none'){
					if($(this).children('.bottomLi').css('display')=='flex'){//当前为打开状态
						$(this).find('.rightPic img').css('transform','rotateZ(0deg)');
						$(this).children('.bottomLi').slideUp()  //关掉自己
					}else{//当前为关闭状态
						$(this).find('.rightPic img').css('transform','rotateZ(180deg)');
						$(this).siblings().find('.rightPic img').css('transform','rotateZ(0deg)');
						var houseId = $(this).attr('data-id');
						
						var houseType=$(this).attr('data-type');
//						var	houseType = localStorage.getItem('type');
						var cityId = localStorage.getItem('city');
						$(this).attr('data-flag',1)
						if(flag==0){
							$.ajax({
								type:"get",
								url:`${ajaxURL}/houseweb/H5/fiveScoresDetail.do`,
								data: {
									houseId:houseId,
									houseType:houseType,
									city:cityId
								},
								async:false,
								success:function(res){
									var data = JSON.parse(res);
									if(data.status==1000){
										if(data.data.houseList.length!=0){
											if(houseType=='new'){
												that.pingpei=data.data.houseList[0].pinPaiShiLi;
												that.guihua=data.data.houseList[0].sheQuGuiHuaYuJingGuan;
												that.shequ=data.data.houseList[0].sheQuPeiTao;
												that.wuye=data.data.houseList[0].wuYeFuWu;
												that.diduan=data.data.houseList[0].diDuanPeiTao;
											}else{
												that.pingpei=data.data.houseList[1].otherScores;
												that.guihua=data.data.houseList[2].otherScores;
												that.shequ=data.data.houseList[3].otherScores;
												that.wuye=data.data.houseList[4].otherScores;
												that.diduan=data.data.houseList[0].otherScores;
											}
											
										}else{
											that.pingpei=0;
											that.guihua=0;
											that.shequ=0;
											that.wuye=0;
											that.diduan=0;
										}
										
										for(var i=0;i<that.houseList.length;i++){
											if(that.houseList[i].houseId==houseId){
												that.houseList[i].fxzb={
													pingpei:that.pingpei,
													shequ:that.shequ,
													guihua:that.guihua,
													wuye:that.wuye,
													diduan:that.diduan
												}
											}
										}
									}
								}
							});
						}
						
						
						$(this).children('.bottomLi').slideDown().css('display','flex'); //打开自己
						$(this).siblings().children('.bottomLi').slideUp()   //关闭别人
					}
				}else{
					if($(this).find('.check-box').prop('checked')){
						console.log(data)
						for(var i=0;i<data.length;i++){
							if($(this).attr('data-id')==data[i].houseId){
								data.splice(i,1)
							}
						}
						$(this).find('.check-box').prop("checked",false);
					}else{
						var data0 = {
							houseId:$(this).attr('data-id'),
							houseName:$(this).find('.house b').html(),
							price:$(this).find('.price').html(),
							type:$(this).attr('data-type'),
							score:$(this).find('.score0').html()
						}
						
						data.push(data0)
						
						var hash = {}; 
						data = data.reduce(function(item, next) { 
							hash[next.houseId] ? '' : hash[next.houseId] = true && item.push(next); 
							return item 
						}, [])	
						$(this).find('.check-box').prop("checked",true);
					}
					
					that.selList= data;
					localStorage.setItem('selList', JSON.stringify(data));
					
				}
				if(data.length==2){
					$('.duibi').removeClass('active').attr("disabled",false);
					that.duibi='进行PK';
				}else{
					$('.duibi').addClass('active').attr("disabled",true);
					that.duibi='只能选择两项进行PK';
				}
				
			})
			
			$('.select0').change(function(){
				var cityId = $(this).children("option:selected").attr('data-cityId');
				var city = $(this).children("option:selected").text();
				
				localStorage.setItem("city",cityId);
				localStorage.setItem("cityName",city);
				that.reload();
				var data = JSON.parse(localStorage.getItem('data'));
				data.city = cityId;
				data.page=1;
				localStorage.setItem('data', JSON.stringify(data));
				that.houseList = [];
				that.articleAjax(cityId);
				 
				setTimeout(function(){
					that.indexMapInitAjax(cityId,'new')
					let data = JSON.parse(localStorage.getItem('data'));
						data.page=1;
						localStorage.setItem('data',JSON.stringify(data));
					that.ajaxU0(1, that.houseType);
				},500)
			})
			
			//对比
			$('.rightPK').click(function(){
				if(that.showInput){
					that.showInput=false;
				}else{
					that.showInput=true
				}
				localStorage.setItem('showInput',that.showInput)
				if($('.radio').css('display')=='none'){
					$('.radio').show();
					$('.duibi').show();
					$('.bottomLi').hide()
				}else{
					$('.radio').hide()
					$('.duibi').hide();
				}
				
			})
			//进行对比
			$('.duibi').click(function(){
				var type = localStorage.getItem('type')
				if(!$(this).hasClass('active')){
					that.$router.push({
						path: '/duibixiangqing',
						name: 'duibixiangqing',
						query:{
							type:type
						}
					});
				}
			})
			
			//搜索
			$('.search input').focus(function(){
				that.comeToNewPage('search');
			})
			//进入地图排行
			$('.map').click(function(){
				that.comeToNewPage('map');
			})
			//进入个人中心
			$('.zhongxing').click(function(){
				that.comeToNewPage('user');
			})
			//进入资讯
			$('.zixun, .tuiguang').click(function(){
				that.comeToNewPage('consult');
			})
			//bottomLi进入详情
			$('.houseRank').on('click','li .bottomLi',function(){
				that.$router.push({
					path: '/morexiangqing',
					name: 'morexiangqing',
					query: {
						id: $(this).parent().attr('data-id'),
						type:  $(this).parent().attr('data-type'),
						ranking:$(this).parent().find('.num').attr('data-index').replace(/[^0-9]/ig,"")
					}
				});
				
				that.flag=false;
				clearInterval(autoTimer);
			})
			
			//删除对比项
			$('.choose').on('click','i',function(){
//				$(this).parent().remove();
				let ll = $(this).siblings('.chooseName').html();
				for(var i=0;i<data.length;i++){
					if(ll==data[i].houseName){
						data.splice(i,1)
					}
				}
				localStorage.setItem('selList', JSON.stringify(data));
				if(data.length==2){
					$('.duibi').removeClass('active').attr("disabled",false);
					that.duibi='进行PK';
				}else{
					$('.duibi').addClass('active').attr("disabled",true);
					that.duibi='只能选择两项进行PK';
				}
				that.houseList.forEach(function(v,i){
					if(v.houseName==ll){
						$('.houseRank li').eq(i).find('.check-box').prop("checked",false);
					}
				})
			})
			
		},
		methods:{
			startBtnOk(){
				let that = this;
				localStorage.setItem('num',1)
				$('.weizhi').hide();
				localStorage.setItem('city', returnCitySN.cid);
				let shengIdx = returnCitySN.cname.indexOf("省");
				let cityName = returnCitySN.cname.slice(shengIdx + 1, -1);
				localStorage.setItem('cityName', cityName);
				var cityId = localStorage.getItem('city')
				var data = JSON.parse(localStorage.getItem('data'));
				data.city = cityId;
				data.page=1;
				localStorage.setItem('data', JSON.stringify(data));
				that.houseList = [];
				
				that.indexAjax();
				
				setTimeout(function(){
					that.indexMapInitAjax(cityId,"new");
					
					let data = JSON.parse(localStorage.getItem('data'));
						data.page=1;
						localStorage.setItem('data',JSON.stringify(data));
					that.ajaxU0(1, that.houseType);
				},500)
			
			},
			indexAjax(){
				var that = this;
				$.ajax({
	                type:"get",
              		cache:false,
	                url:`${that.ajaxURL}/houseweb/front/index.do`,
	                success:function(res){
	                	var data = JSON.parse(res);
	                	if(data.status==1000){
							let city0=localStorage.getItem("cityName");
							let cityId=localStorage.getItem("city");
		                	var cc=[]
							for(var i=0;i<data.data.length;i++){
								if(data.data[i].cityName!=localStorage.getItem('cityName')){
									cc.push(data.data[i])
								}else{
									cc.unshift(data.data[i])
								}
							}
							that.citys=cc;
		                }
	                	
	                }
	           })
			},
			articleAjax(cityId){
				var that = this;
				$.ajax({
			        url:`${that.ajaxURL}/houseweb/H5/houseArticleTuiJian.do`,
			        type:'get',
			        cache:false,
			        async:false,
			        data:{
			          city:cityId
			        },
			        success:function(res){
			        	var data = JSON.parse(res);
			        	that.zixunTuijian = data.data;
					}
				})
			},
			indexMapInitAjax(cityId,type){
				let that = this;
				$.ajax({
					type: "get",
					async:false,
                	cache:false,
					url: `${that.ajaxURL}/houseweb/H5/indexMapInit_new.do?city=${cityId}&houseType=${type}`,
					success: function(res) {
						var mapData = JSON.parse(res);
						if(mapData.status==1000){
							sessionStorage.setItem('fireNewHouse',JSON.stringify(mapData.data.fireNewHouse))
							sessionStorage.setItem('screenMetro', JSON.stringify(mapData.data.screenMetro));
							sessionStorage.setItem('screenPrice', JSON.stringify(mapData.data.screenPrice));
							sessionStorage.setItem('screenSpace', JSON.stringify(mapData.data.screenSpace));
							sessionStorage.setItem('houseLabel', JSON.stringify(mapData.data.houseLabel));
						}
					}
				})
			},
			comeToNewPage(page){
				this.$router.push({
					path: '/'+page,
					name: page
				});
				this.flag=false;
			},
			getScroll(){
				if($('.scroll')[0].scrollTop >= $('.scroll ul')[0].scrollHeight) {
			        $('.scroll')[0].scrollTop = 0;
			    }else {
			        $('.scroll')[0].scrollTop++;
			    }
			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore/20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str!=5) {
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) <5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			reload: function() {
				var city0 = localStorage.getItem('city');
				var type='new';
				if(localStorage.getItem('type')){
					type = localStorage.getItem('type');
				}
				
				var obj = {};
				var data = {
					city: city0,
					page: 1,
					houseType: type,
					lng: '',
					lat: '',
					screenNearBy: {
						screenNearByNum: obj.screenNearBy,
						screenNearBySign: obj.screenNearBySign
					},
					screenPrice: {
						screenPriceNum: obj.screenPrice,
						screenPriceSign: obj.screenPriceSign
					},
					screenHuXing: obj.screenHuXing,
					screenCharacteristic: obj.screenCharacteristic,
					screenMetro: obj.screenMetro,
					screenMetroer: obj.screenMetroer,
					screenSpace: obj.screenSpace,
					screenTradArea: obj.screenTradArea,
					cheWeiBi: {
						cheWeiBiNum: obj.cheWeiBi,
						cheWeiBiSign: obj.cheWeiBiSign
					},
					sheQuGuiMo: obj.sheQuGuiMo,
				}
				localStorage.setItem('data', JSON.stringify(data));
			},
			ajaxU0: function(page0, houseType) {
//				$('.show').show()
				var that = this;
				that.flag=false;
				let ajaxURL = localStorage.getItem("ajaxURL");
				let data = JSON.parse(localStorage.getItem('data'));
				$.ajax({
					type:'get',
					url: `${ajaxURL}/houseweb/H5/allHoustListDataInit.do`,
//					url: `${ajaxURL}/houseweb/test/HouseTest.do`,
//					url:'http://192.168.0.162:8080/houseweb/H5/allHoustListDataInit.do',
					data: data,
					async:false,
					success: function(res) {	
						
						var data = JSON.parse(res);
						that.flag=true;
						if(data.status==1000){
							if(data.data.houseList){
								that.num=data.data.houseList.length
							}
							if(that.allListNum!=data.data.allNum){
								setTimeout(function(){
									$('.top0').show(200)
									setTimeout(function(){
										$('.top0').hide(500);
									},2000);
								},500);
							}
							that.allListNum = data.data.allNum;
							
//							if(data.data.houseList.length==0 ){
//								if(that.houseList.length==0){
//									setTimeout(function(){
//										$('.show').html('暂无数据');
//									},1000);
//								}
//							}else if(data.data.houseList.length<9){
//								$('.show').hide()
//							}
							for(var i = 0; i < data.data.houseList.length; i++) {
								var arr=[];
								if(data.data.houseList[i].houseLabel==null){
									arr=[];
								}else{
									for(var j=0;j<data.data.houseList[i].houseLabel.split(',').length;j++){
										if(j<4){
											arr.push(data.data.houseList[i].houseLabel.split(',')[j]);
										}
									}
								}
								if(data.data.houseList[i].houseCore!=null){
									data.data.houseList[i].houseCore=data.data.houseList[i].houseCore.toFixed(2);
								}
								data.data.houseList[i].type=localStorage.getItem('type');
								data.data.houseList[i].flag=0;
								data.data.houseList[i].houseLabel=arr;
								data.data.houseList[i].fxzb={
											pingpei:0,
											shequ:0,
											guihua:0,
											wuye:0,
											diduan:0
										}
								that.houseList.push(data.data.houseList[i]);
								
							}
						}
						
					}
				})
				
			},
			infinite(done) {
                if(this.noData) {
	                setTimeout(()=>{
	                    this.$refs.my_scroller.finishInfinite(2);
	                })
	                return;
                }
                let data = JSON.parse(localStorage.getItem('data'));
                let self = this;
				let i=data.page;
                setTimeout(() => {
                	
                	++i;
					
					data.page=i;
					localStorage.setItem('data',JSON.stringify(data));
                	self.ajaxU0(1,'new');
                    if(self.allListNum/i < 9) {
                        self.noData = "没有更多数据"
                    }
                    self.$refs.my_scroller.resize();
                    done()
                }, 1500)
            },
		    refresh:function(){
		      console.log('refresh')
		      this.timeout = setTimeout(()=>{
		        this.$refs.my_scroller.finishPullToRefresh()
		      }, 1500)
		    },
		}
	}
</script>

<style scoped>
	.ly-tab-item {
		text-decoration: none;
		text-align: center;
	}
	.ly-tab-item-icon {
		margin: 0 auto 5px;
	}
	.ly-tab-item-label {
		margin: 0 auto 10px;
		line-height: 18px;
	}
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.slide-fade-enter-active {
	  transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
	  transform: translateX(10px);
	  opacity: 0;
	}
	.main0 {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #f2f2f2;
	}
	.lbt {
		position: relative;
		height: 110px;
		width: 100%;
		
	}
	.lbt .swiper-slide{
		width: 100%;
		height: 100%;
	}
	.lbt .swiper-slide img {
		width: 100%;
		height: 100%;
		vertical-align: baseline;
	}
	.lbt .search {
		position: absolute;
		z-index: 2;
		width: 60vw;
		height: 25px;
		left: 20vw;
		top: 14px;
		border-radius: 5px;
		display: flex;
		background-color: #fff;
	}
	.lbt .search select {
		width: 60px;
		height: 24px;
		padding: 0 0 0 10px;
		font-size: 12px;
		color: #525252;
		background: url("/h5/static/images/arrow.png") no-repeat scroll 44px center transparent;
	}
	.lbt .search input {
		flex: 3;
		border: 0;
		height: 25px;
		font-size: 12px;
		color: #999;
	}
	.lbt .search:before {
		position: absolute;
		left: 60px;
		top: 4px;
		content: '';
		width: 1px;
		height: 16px;
		background-color: #666;
	}
	.lbt p {
		position: absolute;
		width: 100vw;
		text-align: center;
		bottom: 0px;
		color: #fff;
		z-index: 999;
	}
	/*.lbt p {
		position: absolute;
	    width: 100vw;
	    bottom: 0px;
	    color: #fff;
	    z-index: 99;
	    text-align: center;
	    margin-bottom: -5px;
	}
	.lbt p img {
		width: 100vw;
	}*/
	.tuiguang {
		position: relative;
		height: 53px;
		margin: 6px 0 0px;
	}
	.tuiguang>img {
		position: absolute;
		right: 15px;
		top: 15px;
		width: 9px;
	}
	.tuiguang .laba {
		float: left;
		margin: 5px 0px 0 15px
	}
	.tuiguang .laba img {
		width:40px;
	}
	.tuiguang .swiper_wrap {
		position: relative;
		width: 76vw;
		height: 48px;
		overflow: hidden;
	}
	.tuiguang .swiper_wrap:before {
		position: absolute;
		left: 12px;
		top: 5px;
		content: '';
		width: 1px;
		height: 40px;
		background-color: #c6c6c6;
	}
	.tuiguang .swiper_wrap ul {
		position: absolute;
	}
	.tuiguang .swiper_wrap li {
		line-height: 24px;
		padding-left: 24px;
		width: 76vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tuiguang .swiper_wrap li a {
		font-size: 12px;
		color: #666;
	}
	.daohang {
		width: 100vw;
		height: 68px;
		position: relative;
	}
	nav {
		position: absolute;
		width: 80vw;
		height: 68px;
		overflow-x: auto;
		overflow-y: hidden;
	}
	/*nav::-webkit-scrollbar {
		display: none;
	}*/
	.rightPK {
		position: relative;
		float: right;
		height: 68px;
		width: 20vw;
		background-color: #fff;
		z-index: 5;
		text-align: center;
	}
	.rightPK img {
		margin: 6px auto 2px;
		width: 28px;
	}
	.rightPK span {
		color: #616161;
		font-size: 12px;
		display: block;
	}
	.nav {
		position: absolute;
		width: 120vw;
		height: 68px;
		background-color: #fff;
		font-size: 12px;
	}
	.nav div {
		float: left;
		width: 20vw;
		height: 68px;
		position: relative;
		display: flex;
		flex-direction:column;
		overflow: hidden;
		text-align: center;
	}
	.nav div.on span{
		color: #0186c2;
	}
	.nav div.on:after {
		position: absolute;
	    bottom: 0px;
	    left: 15%;
	    content: '';
	    width: 70%;
	    height: 2px;
	    background-color: #0186c2;
	}
	.nav img {
		margin: 10px auto 3px;
		width: 28px;
	}
	.nav span {
		color: #616161;
	}
	.houseRank {
		width: 100vw;
	}
	.houseRank ul {
		list-style: none;
		margin: 0;
		padding: 0;	
	}
	.houseRank li {
		background-color: #fff;
		margin-top: 10px;
	}
	.houseRank li:nth-child(1) .num b {
		color: ;
	}
	.houseRank li:nth-child(2) .num b {
	}
	.houseRank li:nth-child(3) .num b {
		color: #666;
	}
	.houseRank li .topLi {
		height: 77px;
		width: 100%;
		padding: 18px 0;
		display: flex;
	}
	.houseRank li .radio {
		width: 30px;
		position: relative;
		display: none;
	}
	.houseRank li .radio input {
		position: absolute;
		top: 15px;
    	left: 15px;
	}
	.houseRank li .num {
		width: 25%;
		display: flex;
		flex-direction: column;
		text-align: center;
		line-height: 14px;
	}
	.houseRank li .num img {
		width: 34px;
		margin: auto;
	}
	.houseRank li .num b {
		font-size: 19px;
		color: #666;    
		display: inline-block;
    	line-height: 40px;
    	font-weight: normal;
	}
	.houseRank li .num b span {
		/*font-size: 14px;*/
		font-weight: normal;
	}
	.houseRank li .house {
		width: 65%;
		color: #666;
	}
	.houseRank li .house b {
		display: inline-block;
	    width: auto;
	    max-width: 124px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	    
	.houseRank li .house i{
		font-size: 12px;
		font-style: normal;
		color: #666;
	}
	.houseRank li .house h3 {
		font-size: 16px;
		color: #333;
		margin: 0;
		margin-top: -6px;
    	margin-bottom: 4px;
		font-weight: normal;
	}
	.houseRank li .house .xing img {
		width: 14px;
	}
	.houseRank li .house h3 span {
		font-size: 12px;
		color: #666;
	}
	.houseRank li .house div {
		font-size: 12px;
	}
	.houseRank li .house div span {
		color: #f00;
		
	}
	.houseRank li .house .score0 {
		display: inline-block;
		width: 40px;	
		text-align: right;
	}
	.houseRank li .house div span:last-child {
		margin-left: 25px;
	}
	.rightPic {
		position: relative;
		width: 25%;
		text-align: center;
	}
	
	.rightPic img {
		position: absolute;
		top: 10px;
		right: 16px;
		width: 21px;
	}
	.bottomLi {
		height: 70px;
		background-color: #d3e0ef;
		display: flex;
		padding: 8px 0 0 15px;
		display: none;
	}
	
	.bottomLiNum {
		width: 15vw;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.bottomLiNum img {
		width: 19px; 
		height: 19px;   
		margin: 0 auto;
	}
	.bottomLiNum span {
		color: #0186c2;
		font-size: 12px;
		margin-top: 6px;
    	line-height: 12px;
	}
	.bottomLiNum div {
		font-size: 12px;
		color: #0186c2;
	}
	.xiangqing {
		position: relative;
    	right: -25px;
		line-height: 55px;
		color: #0186c2;
		font-size: 14px;
	}
	.duibi {
		display: none;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		line-height: 40px;
		background-color: #0186c2;
		text-align: center;
		color: #fff;
	}
	.duibi.active {
		background-color: #ccc;
	}
	.choose {
		background-color: #fff;
		margin-top: 9px;
	}
	.choose div {
		font-size: 14px;
		padding: 5px 9px;
	}
	.choose i {
		float: right;
		font-size: 20px;
	}
	.choose img {
		width: 14px;
		vertical-align: baseline;
	}
	.choose span {
		display: inline-block;
		margin-right: 15px;
		height: 100%;
	}
	.choose span:first-child {
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.alert {
		display: none;
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		width: 0px;
		height: 0px;
		line-height: 150px;
		text-align: center;
		border-radius: 5px;
		background-color: rgba(0,0,0,0.6);
		z-index: 999;
		font-size: 14px;
		color: #fff;
	}
	.top0 {
		display: none;
		position: fixed;
		top: 300px;
		left: 50%;
		transform: translate(-50%);
		text-align: center;
		width: auto;
		line-height: 48px;
		font-size: 12px;
		padding: 0 10px;
		background-color: #575757;
		/*opacity: 0.8;*/
		color: #fff;
		border-radius: 4px;
		z-index: 9999;
	}
	.weizhi {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		top: 0px;
		left: 0px;
		z-index: 99999;
	}
	.weizhi .weizhizhong {
		position: absolute;
		top: 260px;
		left: 50%;
		transform: translateX(-50%);
		width: 60vw;
		height: 100px;
		background-color: #fff;
		border-radius:6px;
		font-size: 12px;
		text-align: center;
		
	}
	.cityweizhi {
		margin: 15px 10px 0px;
	}
	.btn {
		margin-top: 5px;
		padding-top: 5px;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: space-around;
	}
</style>